import React, { Component } from 'react';
import "../../src/view/Register.scss";
import pic from '../../src/components/Login/imgs/pic.png';
import { user_register } from '../../src/utils/api.js';

class Register extends Component {
    // 挂载期
    constructor(props) {
        super(props);
        //使用state初始化组件状态
        this.state = {
            pic: pic,
            phone: "",
            pass: ""
        }
    };
    handleChange(e) {
        this.setState({ [e.target.name]: (e.target.type === "checkbox" || e.target.type === "radio") ? e.target.checked : e.target.value }, () => {
            console.log(this.state);
        })
    }

    render() {
        return (
            <div className='login_page'>
                <div className='logoBox'>
                    <img src={pic} alt="" />
                </div>
                <div className='userInfo'>
                    <input type="text" placeholder='请输入用户名' name='phone' value={this.state.phone} onChange={(e) => {
                        this.handleChange(e);
                    }} />
                    <input type="password" placeholder='请输入密码' name='pass' value={this.state.pass} onChange={(e) => {
                        this.handleChange(e);
                    }} />
                    {/* <input type="password" placeholder='请确认密码' name='pass' value={this.state.pass} onChange={(e) => {
                        this.handleChange(e);
                    }} /> */}

                </div>
                <div className='login'>
                    <input type="button" value="注册" onClick={() => {
                        this.register()
                    }} />
                </div>
                <div className="register">
                    <a onClick={() => {
                        this.props.history.push("/login")
                    }}>登录</a>
                </div>
            </div>
        );
    }
    register() {
        var phoneReg = /^1[3,5,7]\d{9}$/;
        var passReg = /^\w{6,}$/;
        if (!phoneReg.test(this.state.phone)) {
            alert("请输入合法的手机号");
            if (!passReg.test(this.state.pass)) {
                alert('请输入至少六位密码');
            }
        }
        user_register({ phone: this.state.phone, pass: this.state.pass }).then((res) => {
            alert(res.data.msg);
        })

    }
}

export default Register;
